<button nz-button nzType="primary" (click)="addNewOrganization(null)">
  新增
</button>
<!-- <button
  nz-button
  nzType="primary"
  nzDanger
  (click)="delRoles()"
  [disabled]="treeService.checklistSelection.selected.length === 0"
>
  删除
</button> -->

<nz-divider nzOrientation="left" nzText=""></nz-divider>

<div nz-row>
  <div nz-col [nzSpan]="18" [nzPush]="6">
    <nz-card nzTitle="基本信息" nzSize="small" [nzExtra]="extraTemplate">
      <div nz-row>
        <div nz-col nzSpan="8">名称：{{ selectedRole?.name }}</div>
        <div nz-col nzSpan="8">代码：{{ selectedRole?.code }}</div>
        <div nz-col nzSpan="8">
          所属组织：
          <nz-tag
          nzColor="blue"
          [nzMode]="'closeable'"
          (nzOnClose)="onTagClose(org)"
          *ngFor="let org of selectedRole?.parentOrgs"
        >
        {{ org.name }}
        </nz-tag>
          <a nz-tooltip nzTooltipTitle="设置所属组织"
            ><i nz-icon nzType="edit" nzTheme="outline"></i
          ></a>
        </div>
        <div nz-col nzSpan="16">
          汇报对象：

            <nz-tag
            nzColor="blue"
            [nzMode]="'closeable'"
            (nzOnClose)="onTagClose(parent)"
            *ngFor="let parent of selectedRole?.parents"
          >
          {{ parent.name }}
          </nz-tag>

          <a nz-tooltip nzTooltipTitle="设置汇报对象" (click)="showReportRole()"
            ><i nz-icon nzType="edit" nzTheme="outline"></i
          ></a>
        </div>
        <div nz-col nzSpan="8">创建时间：{{ selectedRole?.createdDate }}</div>
        <div nz-col nzSpan="8">创建者：{{ selectedRole?.createdBy }}</div>
        <div nz-col nzSpan="8">
          最后更新时间：{{ selectedRole?.modifiedDate }}
        </div>
        <div nz-col nzSpan="8">最后更新者：{{ selectedRole?.modifiedBy }}</div>
      </div>
    </nz-card>
    <ng-template #extraTemplate>
      <ng-container *ngIf="treeService.selectListSelection.selected.length > 0">
        <!-- <a nz-tooltip nzTooltipTitle="数据授权" (click)="showSetDataPermissionModal()"
        ><i nz-icon nzType="safety-certificate" nzTheme="outline"></i
      ></a> -->
        <a
          nz-tooltip
          nzTooltipTitle="编辑"
          (click)="addNewOrganization(selectedRole)"
          ><i nz-icon nzType="edit" nzTheme="outline"></i
        ></a>
        <a nz-tooltip nzTooltipTitle="删除" (click)="delRole(selectedRole)"
          ><i
            nz-icon
            nzType="delete"
            nzTheme="outline"
            [nzTheme]="'twotone'"
            [nzTwotoneColor]="'red'"
          ></i
        ></a>
        <!-- <a nz-tooltip nzTooltipTitle="查看数据权限"
        ><i nz-icon nzType="eye" nzTheme="outline"></i
      ></a> -->
      </ng-container>
    </ng-template>
  </div>
  <div nz-col [nzSpan]="6" [nzPull]="18">
    <nz-tree-view [nzTreeControl]="treeService.treeControl" [nzDataSource]="dataSource">
      <nz-tree-node *nzTreeNodeDef="let node" nzTreeNodeIndentLine>
        <!-- <nz-tree-node-checkbox
          *ngIf="node.type != 'ORG'"
          [nzDisabled]="node.expandable || node.type === 'ORG'"
          [nzChecked]="treeService.checklistSelection.isSelected(node)"
          (nzClick)="treeService.leafItemSelectionToggle(node)"
        >
        </nz-tree-node-checkbox> -->
        <nz-tree-node-option
          [nzDisabled]="node.type === 'ORG'"
          [nzSelected]="treeService.selectListSelection.isSelected(node)"
          (nzClick)="onItemSelect(node)"
        >
          {{ node.label }}
        </nz-tree-node-option>
      </nz-tree-node>

      <nz-tree-node *nzTreeNodeDef="let node; when: hasChild" nzTreeNodePadding>
        <nz-tree-node-toggle *ngIf="!node.loading">
          <i nz-icon nzType="caret-down" nzTreeNodeToggleRotateIcon></i>
        </nz-tree-node-toggle>
        <!-- <nz-tree-node-checkbox
          *ngIf="node.type != 'ORG'"
          [nzDisabled]="node.expandable || node.type === 'ORG'"
          [nzChecked]="treeService.descendantsAllSelected(node)"
          [nzIndeterminate]="treeService.descendantsPartiallySelected(node)"
          (nzClick)="treeService.itemSelectionToggle(node)"
        ></nz-tree-node-checkbox> -->
        <nz-tree-node-toggle *ngIf="node.loading" nzTreeNodeNoopToggle>
          <i nz-icon nzType="loading" nzTreeNodeToggleActiveIcon></i>
        </nz-tree-node-toggle>
        <nz-tree-node-option
          [nzDisabled]="node.type === 'ORG'"
          [nzSelected]="treeService.selectListSelection.isSelected(node)"
          (nzClick)="onItemSelect(node)"
        >
          {{
            node.label +
              (node.childCount > 0 ? "（" + node.childCount + "）" : "")
          }}
        </nz-tree-node-option>
      </nz-tree-node>
    </nz-tree-view>
  </div>
</div>

<nz-modal
  [(nzVisible)]="isNewVisible"
  nzTitle="新增"
  (nzOnCancel)="handleCancel()"
  (nzOnOk)="submitForm()"
>
  <nz-content *nzModalContent>
    <form nz-form nzLayout="vertical" [formGroup]="validateForm">
      <nz-form-item>
        <nz-form-label>名称</nz-form-label>
        <nz-form-control nzErrorTip="">
          <input nz-input formControlName="name" placeholder="请输入名称" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label>代码</nz-form-label>
        <nz-form-control nzErrorTip="">
          <input nz-input formControlName="code" placeholder="请输入代码" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngIf="validateForm.getRawValue().id===undefined">
        <nz-form-label>请选择所属组织：</nz-form-label>
        <app-role-search
        ></app-role-search>
      </nz-form-item>
    </form>
  </nz-content>
</nz-modal>

<nz-modal
  [(nzVisible)]="isRoleEdit"
  nzTitle="请选择汇报对象"
  (nzOnCancel)="handleCancel()"
  (nzOnOk)="saveReportRole(selectedRole)"
>
  <nz-content *nzModalContent>
    <app-role-search></app-role-search>
  </nz-content>
</nz-modal>
